<!--
 * @Descripttion:  使用定位的方式 ， 上下固定 ，中间自适应， 中间设置 top: 50px; bottom: 50px; 让高度自动适应。
 * @version: 
 * @Author: huangyong
 * @Date: 2019-11-22 15:17:21
 * @LastEditors: 
 * @LastEditTime: 2019-11-22 15:39:07
 -->
<template>
  <div class="base-wrap" ref="wrap">
    <NavHeader class="top"></NavHeader>
    <Content :num="100" class="middle"></Content>
    <BackFooter class="bottom"></BackFooter>
  </div>
</template>
<script>
import NavHeader from "../components/NavHeader";
import BackFooter from "../components/BackFooter";
import Content from "../components/Content";
export default {
  name: "index-view",
  components: {
    BackFooter,
    NavHeader,
    Content,
  },
};
</script>
<style lang="less" scoped>
.base-wrap {
  width: 100vw;
  height: 100vh;
  position: relative; overflow: hidden;
  .top, .middle, .footer{
    position: absolute; left: 0; width: 100%;
  }
  .top{
    top: 0; height: 50px;
  }.middle{
    top: 50px; bottom: 50px; background:rgb(206, 201, 201);
  }.bottom {
    bottom: 0;
  }
}

</style>